<template>
    <div id="content" style="display: flex; flex-direction: column; ">
        <div style="flex: 1">
            <ul id="myTabs" class="nav nav-tabs" role="tablist">
                <!--            <li role="presentation" class="active li1"><a href="#tab1" role="tab" data-toggle="tab" aria-controls="tab1" aria-expanded="true">基本配置</a></li>-->
                <li role="presentation" class="li2 dealers"><a href="#tab2" role="tab" data-toggle="tab" aria-controls="tab2">处理人</a></li>
                <li role="presentation" class="li2 smart"><a href="#tab8" role="tab" data-toggle="tab" aria-controls="tab2">智能选人</a></li>
                <li role="presentation" class="li2 flow"><a href="#tab9" role="tab" data-toggle="tab" aria-controls="tab2">流转设置</a></li>
                <li role="presentation" class="li2 fields"><a href="#tab3" role="tab" data-toggle="tab" aria-controls="tab3">填写字段</a></li>
                <li role="presentation" class="li2 rfields"><a href="#tab5" role="tab" data-toggle="tab" aria-controls="tab5">必填字段</a></li>
                <li style="display: none;" role="presentation" class="li2"><a href="#tab4" role="tab" data-toggle="tab" aria-controls="tab4">转入条件</a></li>
                <li role="presentation" class="li2 datasource"><a href="#tab10" role="tab" data-toggle="tab" aria-controls="tab4">数据源</a></li>
                <li role="presentation" class="li2 permission"><a href="#tab7" role="tab" data-toggle="tab" aria-controls="tab7">权限配置</a></li>
                <li role="presentation" class="li2 timeout"><a href="#tab6" role="tab" data-toggle="tab" aria-controls="tab6">超时提醒</a></li>
                <li role="presentation" class="li2 childprocess"><a href="#tabc" role="tab" data-toggle="tab" aria-controls="tab6">子流程</a></li>
            </ul>
            <div id="myTabContent" class="tab-content">
                <!--            <div id="tab1" class="tab-pane">-->
                <!--                1-->
                <!--            </div>-->
                <div id="tab2" class="tab-pane">
                    <node-dealers :data="dealers"></node-dealers>
                </div>
                <div id="tab8" class="tab-pane">
                    <node-smart :node-id="id" :data="smart" ref="smart"></node-smart>
                </div>
                <div id="tab9" class="tab-pane">
                    <node-flow :data="flow"></node-flow>
                </div>
                <div id="tab3" class="tab-pane">
                </div>
                <div id="tab5" class="tab-pane">
                </div>
                <div style="display: none;" id="tab4" class="tab-pane">
                </div>
                <div class="tab-pane" id="tab10">
                    <node-datasource :data="datasource"></node-datasource>
                </div>
                <div class="tab-pane" id="tab7">
                    <node-permission :data="config"></node-permission>
                </div>
                <div id="tab6" class="tab-pane">
                    <node-timeout :data="timeout"></node-timeout>
                </div>
                <div id="tabc" class="tab-pane">
                    <node-childprocess :data="children"></node-childprocess>
                </div>
            </div>
        </div>

<!--        <div style="text-align: center; padding-top: 8px;padding-bottom: 8px;">-->
<!--            <a href="javascript:;" class="btn btn-primary" @click="save()">保存</a>-->
<!--        </div>-->

    </div>
</template>

<script>
    // function loadComponent(name, src){
    //     Vue.component(name, function (resolve,reject) {
    //         $.get(src, function (html) {
    //             html = $(html);
    //             var script = html.filter("script");
    //             var template = html.filter("template");
    //             var style = html.filter("style");
    //             script = "(function(){ " + script.html() + "; return component; })();";
    //             var data = eval(script);
    //             data.template = template.html();
    //             resolve(data)
    //             if(style.length){
    //                 $("head").append(style)
    //             }
    //         });
    //     });
    // }

    loadComponent("node-smart", "./smart.html");
    loadComponent("node-flow", "./flow.html");
    loadComponent("node-dealers", "./dealers.html");
    loadComponent("node-datasource", "./datasource.html");
    loadComponent("node-permission", "./permission.html");
    loadComponent("node-timeout", "./timeout.html");
    loadComponent("node-childprocess", "./child.html");

    var component = ({
        data(){
            return {
                id: "",
                name:"",
                type: "task",
                fields:{
                    allFields: [],
                    requiredFields :[]
                },
                flow:{
                    sponsor: ""
                },
                smart: {
                    filterRule: "all",
                    chooseRule: "none",
                    targetRule: "",
                    formFields: []
                },
                dealers: {
                    roles: {},
                    deps: {},
                    users: {}
                },
                config: {
                    permission: []
                },
                timeout:{},
                datasource: {},
                children: {}
            }
        },
        methods:{
            save(){
                // window.close();
            }
        },
        mounted(){
            var nodeId = location.search.match(/id=([^&]+)/)[1];
            ;(function () {
                var matched = location.search.match(/page=([^&]+)/);
                var page;
                if(matched){
                    page = matched[1];
                } else {
                    page = "dealers";
                }
                var t = $("." + page);
                var idex = t.index();
                t.addClass("active").siblings().removeClass("active");
                $("#myTabContent .tab-pane").eq(idex).addClass("active").siblings().removeClass("active");
            })();

            if(!nodeId){
                return
            }
            if(!opener || !opener.bpmData){
                return
            }

            //默认值
            if(opener.bpmData.nodes[nodeId]){
                for(var i in opener.bpmData.nodes[nodeId]){
                    if(opener.bpmData.nodes[nodeId][i]){
                        Vue.set(this, i, opener.bpmData.nodes[nodeId][i]);
                    }
                }
            }
            //因为有新增的字段，所以尽数返还到这上面
            opener.bpmData.nodes[nodeId] = this.$data;
            //
            // console.log(this)
            this.id = nodeId;

            // $("#tab2").load("./dealers.html")
            // $("#tab7").load("./permission.html")

            $("#tab3").fsSelector("all", opener.fields, this.fields.allFields)
            $("#tab5").fsSelector("required", opener.fields, this.fields.requiredFields)

            //郑郑的粗鄙代码
            // getTimeoutSet()

            // function getTimeoutSet(){
            //     $('.timeout').change(function(e){
            //         var time = $("#timeout").val();
            //         var selectVal = $("#selectTime").val();
            //         opener.bpmData.nodes[nodeId].timeoutSet.timeout = time + "_" + selectVal;
            //     });
            //     $('.maxTimeout').change(function(e){
            //         var time = $("#maxTimeout").val();
            //         var selectVal = $("#selectMax").val();
            //         opener.bpmData.nodes[nodeId].timeoutSet.maxTimeout = time + "_" + selectVal;
            //     });
                // $(".maxTimeout").bind('input propertychange',function(){
                //     var val = $(this).val();
                //     var selectVal = $("#selectTime").val()
                //     opener.bpmData.nodes[nodeId].timeoutSet.timeout = val + "_" + selectVal;
                // })
                // $("#maxTimeout").bind('input propertychange',function(){
                //     var val = $(this).val();
                //     var selectVal = $("#selectMax").val()
                //     opener.bpmData.nodes[nodeId].timeoutSet.maxTimeout = val + "_" + selectVal;
                // })
            // }

            // var timeout = opener.bpmData.nodes[nodeId].timeoutSet.timeout.split("_");
            // var maxTimeout = opener.bpmData.nodes[nodeId].timeoutSet.maxTimeout.split("_");
            // if(timeout.length>0){
            //     if(timeout[0]==""){
            //         timeout[0] = "0";
            //     }
            //     $("#timeout").val(timeout[0])
            // }
            // if(maxTimeout.length>0){
            //     if(maxTimeout[0]==""){
            //         maxTimeout[0] = "0";
            //     }
            //     $("#maxTimeout").val(maxTimeout[0])
            // }
            // if(opener.bpmData.nodes[nodeId].intelligence && !$.isEmptyObject(opener.bpmData.nodes[nodeId].intelligence)){
            //     Vue.set(this, "smart", opener.bpmData.nodes[nodeId].intelligence)
            // }
        }
    });

</script>

